import React, { Component } from 'react'
import Header from './components/Header/Header'
import List from './components/List/List'
import Footer from './components/Footer/Footer'
import './App.css'
export default class App extends Component {
  // 状态提升: 把多个组件要用到的同一份数据定义在他们公共的父组件中
  state = {
    todos: [
      {
        id: 1,
        todoName: '抽烟',
        isDone: true,
      },
      {
        id: 2,
        todoName: '喝酒',
        isDone: false,
      },
      {
        id: 3,
        todoName: '找富婆',
        isDone: true,
      },
    ],
    // 这个editId用于控制Item组件中是否要展示编辑文本框.如果editId的值和某个Item组件的id相同,则这个Item就渲染编辑文本框
    editId: undefined,
  }
  // App定义的addTodo,通过props传递给Header组件,Header组件中调用这个函数,通知App应该添加任务了,并且传递任务名过来
  addTodo = (todoName) => {
    // 根据任务名,创建任务对象
    const todo = {
      id: Date.now(),
      todoName,
      isDone: false,
    }

    // 在原有任务的基础上,添加新任务
    this.state.todos.push(todo)
    // 调用setState,让组件更新(react中父组件更新了,子组件一定也会更新)
    this.setState({
      todos: this.state.todos,
    })
  }
  // 删除一条任务数据的方法
  delTodo = (id) => {
    // 删除todos数组中的某个指定对象
    const newTodos = this.state.todos.filter((item) => {
      return item.id !== id
    })

    // 调用setState
    this.setState({
      todos: newTodos,
    })
  }

  // 修改一条任务数据的方法
  updateTodo = (id) => {
    this.state.todos.forEach((item) => {
      // 找到要修改的数据对象,将item.isDone取反
      if (item.id === id) item.isDone = !item.isDone
    })

    this.setState({
      todos: this.state.todos,
    })
  }

  // 全选按钮的方法
  updateAllTodo = (target) => {
    // 修改所有数据的isDone
    this.state.todos.forEach((item) => {
      item.isDone = target
    })
    this.setState({
      todos: this.state.todos,
    })
  }

  // 清除完成任务的方法
  clear = () => {
    const newTodos = this.state.todos.filter((item) => !item.isDone)
    this.setState({
      todos: newTodos,
    })
  }

  // 修改editId的方法
  setEditId = (id) => {
    // console.log(id)
    this.setState({
      editId: id,
    })
  }

  render() {
    // 结构state中的数据,后面使用的时候节省代码
    const { todos, editId } = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo}></Header>
          {todos.length ? (
            <div>
              <List
                todos={todos}
                delTodo={this.delTodo}
                updateTodo={this.updateTodo}
                editId={editId}
                setEditId={this.setEditId}
              ></List>
              <Footer
                todos={todos}
                updateAllTodo={this.updateAllTodo}
                clear={this.clear}
              ></Footer>
            </div>
          ) : (
            <h1>恭喜,暂无任务!</h1>
          )}
        </div>
      </div>
    )
  }
}
